const path = require('path');
const merge = require('webpack-merge');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const baseWebpackConfig = require('./webpack.base.config.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge.smart(baseWebpackConfig, {
  // 打包模式
  mode: 'production', // 两个参数: production 和 development
  // 出口
  output: {
    filename: 'js/[name]-[hash:5].min.js',
    path: path.join(__dirname, '/dist')
  },
  module: {
    rules: [
      // 处理less
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer'), require('cssnano')]
            }
          },
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    // 自动将js引入HTML
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html',
      title: '2 Dome',
      favicon: 'favicon.ico',
      chunks: ['main'],
      minify: {
        // 使用 minify 会对生成的 html 文件进行压缩
        removeComments: true, // 清理html中的注释
        collapseWhitespace: true, // 清理html中的空格、换行符
        removeAttributeQuotes: true // 移除属性的引号
      }
    }),
    //css分离
    new MiniCssExtractPlugin({
      filename: 'css/[name]-[hash:5].min.css',
      chunkFilename: 'css/[id]-[hash:5].min.css'
    })
  ],
  optimization: {
    /**
     * 分包
     */
    // splitChunks: {
    //   cacheGroups: {
    //     commons: {
    //       name: 'commons', //提取出来的文件命名
    //       chunks: 'all', //initial表示提取入口文件的公共部分
    //       minChunks: 2, //表示提取公共部分最少的文件数
    //       minSize: 0 //表示提取公共部分最小的大小
    //     }
    //   }
    // },
    /**
     * 压缩
     */
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        /**
         *  sourceMap 和 devtool: 'inline-source-map', 冲突
         */
        sourceMap: false, // set to true if you want JS source maps,
        /**
         *  extractComments 导出备注
         */
        extractComments: 'all'
      })
    ]
  }
});
